<template>
  <div class="game-content">
    <com-header></com-header>
    <div class="centerbox">
      <div class="pro-box">
        <div
          :class="{
            greenactive: selected === 'green',
            isgreenacitve: selected !== 'green',
          }"
          @click="checkSelected('green')"
        >
          <span>{{$t('ls')}}</span>
          <span>1.3.7.9</span>
        </div>
        <div
          :class="{
            redactive: selected === 'red',
            isredacitve: selected !== 'red',
          }"
          @click="checkSelected('red')"
        >
          <span>{{$t('hs')}}</span>
          <span>2.4.6.8</span>
        </div>
        <div
          :class="{
            purplective: selected === 'purple',
            ispurplective: selected !== 'purple',
          }"
          @click="checkSelected('purple')"
        >
          <span>{{$t('zs')}}</span>
          <span>0或5</span>
        </div>
      </div>
      <div class="ball-box">
        <div v-for="(item, index) in imgData" :key="index">
          <img
            :src="item.src"
            :class="{ activeballsty: isActive(index) }"
            @click="handleBall(index)"
            alt
          />
        </div>
      </div>
      <com-money class="money-posi"></com-money>
      <com-btn class="btn-posi"></com-btn>
    </div>
  </div>
</template>

<script>
import ComMoney from "./Com/ComMoney.vue";
import ComHeader from "./Com/ComHeader.vue";
import ComBtn from "./Com/ComBtn.vue";
import { mapState } from "vuex";
export default {
  name: "GameSdlh",
  //游戏红绿灯
  props: {},
  components: {
    ComMoney,
    ComHeader,
    ComBtn
  },
  data() {
    return {
      imgData: [
        { src: require("@/assets/images/payOrder/c0.png"), code: 0 },
        { src: require("@/assets/images/payOrder/c1.png"), code: 1 },
        { src: require("@/assets/images/payOrder/c2.png"), code: 2 },
        { src: require("@/assets/images/payOrder/c3.png"), code: 3 },
        { src: require("@/assets/images/payOrder/c4.png"), code: 4 },
        { src: require("@/assets/images/payOrder/c5.png"), code: 5 },
        { src: require("@/assets/images/payOrder/c6.png"), code: 6 },
        { src: require("@/assets/images/payOrder/c7.png"), code: 7 },
        { src: require("@/assets/images/payOrder/c8.png"), code: 8 },
        { src: require("@/assets/images/payOrder/c9.png"), code: 9 }
      ],
      ball: [
        {
          item: 1
        },
        {
          item: 2
        },
        {
          item: 3
        }
      ],
      activeball: [],
      selected: ""
    };
  },
  computed: {
    ...mapState("handlegame", ["gameInfo", "hldData"]),
    ...mapState("handlegame", ["isInit"])
  },
  watch: {
    isInit: {
      handler(newVal) {
        if (newVal) {
          this.init();
          this.$store.commit("handlegame/INTE_PAGE_STATE", false);
        }
      },
      deep: true
    }
  },
  created() {
    this.imgData.forEach((item, index) => {
      item.code = index;
    });
  },
  methods: {
    handleBall(value) {
      this.selected = "";
      if (this.activeball.length > 0) {
        this.activeball = [];
      }
      this.activeball.push(value);
      var ruleListData = {
        id: "TOP1_NO"
      };
      this.$store.dispatch("handlegame/setHld", ruleListData);
      this.$store.dispatch("handlegame/setGameNuber", value);
    },
    init() {
      this.activeball = [];
      this.selected = "";
    },
    checkSelected(value) {
      this.selected = value;
      var ruleListData = this.gameInfo.gameRoomConfig.ruleList;
      if (value === "red") {
        for (var i = 0; i <= ruleListData.length; i++) {
          if (ruleListData[i].id === "TOP1_RED") {
            this.$store.dispatch("handlegame/setHld", ruleListData[i]);
            this.activeball = [2, 4, 6, 8];
            return;
          }
        }
      }
      if (value === "green") {
        for (var j = 0; j <= ruleListData.length; j++) {
          if (ruleListData[j].id === "TOP1_GREEN") {
            this.$store.dispatch("handlegame/setHld", ruleListData[j]);
            this.activeball = [1, 3, 7, 9];
            return;
          }
        }
      }

      if (value === "purple") {
        for (var z = 0; z <= ruleListData.length; z++) {
          if (ruleListData[z].id === "TOP1_PURPLE") {
            this.$store.dispatch("handlegame/setHld", ruleListData[z]);
            this.activeball = [0, 5];
            return;
          }
        }
      }
    },
    isActive(index) {
      return this.activeball.includes(index);
    }
  }
};
</script>
<style lang="less" scoped>
.game-content {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.por-posi {
  margin-top: 20px;
}

.pro-box {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 6px 6px 6px 6px;
    span:nth-child(1) {
      font-size: 14px;
      font-weight: 800;
    }
    span:nth-child(2) {
      font-size: 12px;
      font-weight: 500;
    }
  }
}

.ball-box {
  margin-top: 15px;
  width: 314px;
  height: 87px;
  display: grid;
  grid-template-columns: repeat(5, 2fr);
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 间距 */
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
    }
  }
}
.ball-select::-webkit-scrollbar {
  display: none; /* Webkit 兼容性：隐藏滚动条 */
}
.ballsize {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.ballbox {
  margin-top: 14px;
  display: flex;
}
.centerbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .money-posi {
    margin-top: 20px;
  }
  .btn-posi {
    margin-top: 19px;
  }
}
.greenactive {
  width: 105px;
  height: 47px;
  color: #ffffff;
  background: linear-gradient(180deg, #75ff8b 0%, #35d74f 100%);
}
.isgreenacitve {
  width: 103px;
  height: 45px;
  border: 2px solid #35d74f;
  color: #35d74f;
}
.redactive {
  width: 105px;
  height: 47px;
  color: #ffffff;
  background: linear-gradient(180deg, #ff8989 0%, #ff0d0d 100%);
}
.isredacitve {
  width: 103px;
  height: 45px;
  border: 2px solid #ff0d0d;
  color: #ff0d0d;
}
.purplective {
  width: 105px;
  height: 47px;
  color: #ffffff;
  background: linear-gradient(180deg, #f692ff 0%, #d241df 100%);
}
.ispurplective {
  width: 103px;
  height: 45px;
  border: 2px solid #d241df;
  color: #d241df;
}
.activeballsty {
  border: 1px solid #ffffff;
  border-radius: 20px;
}
</style>
